<template>
<!--   Gallery 上传文件组件-->
       <div class="popup" v-if="show">
           <div class="pop-up">
               <div class="lala">
                   <p>图册上传</p>
                   <img src="../../assets/images/del(2).png" alt="" @click="Hide">
               </div>
               <div class="shangchuan">
                   <div class="clearfix">
                       <a-upload
                               list-type="picture-card"
                               :file-list="fileList"
                               :remove ="handleRemove"
                               @preview="handlePreview"
                               @change="handleChange"
                               :before-upload="beforeUpload"
                               accept=".png,.pdf,.jpg"
                       >
                           <div v-if="fileList.length < 6">
                               <a-icon type="plus" />
                               <div class="ant-upload-text">
                                   选择文件
                               </div>
                           </div>
                       </a-upload>
                       <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                           <img alt="example" style="width: 100%" :src="previewImage" />
                       </a-modal>
                   </div>
                   <div class="name">
                       <p style="cursor: default">信息名称</p><input type="text" name="" id="" v-model="text" style="padding: 0 10px">
                   </div>
                   <div class="tree">
                       <p style="cursor: default">所属分类</p>
                       <a-tree-select
                               show-search
                               style="width: 100%"
                               :value="value"
                               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                               placeholder="请选择"
                               allow-clear
                               multiple
                               tree-default-expand-all
                               @change="onChange"
                               @search="onSearch"
                               @select="onSelect"
                       >

                           <a-tree-select-node v-for="(item,index) in list" :key="item.id" :value="item.id" :title="item.label" >
                               <a-tree-select-node v-for="(item,index1) in list[index].children" :key="item.id" :value="item.id" :title="item.label" >
                                   <a-tree-select-node v-for="(item,index2) in list[index].children[index1].children" :key="item.id" :value="item.label" :title="item.label" >
                                       <a-tree-select-node v-for="item in list[index].children[index1].children[index2].children" :key="item.id" :value="item.id" :title="item.label" >
                                       </a-tree-select-node>
                                   </a-tree-select-node>
                               </a-tree-select-node>
                           </a-tree-select-node>
                       </a-tree-select>
                   </div>
                    <div class="up" @click="upload">上传</div>
               </div>
               <!--           提示文字-->
               <div class="tishi">
                   <p>提示</p>
                   <p>1.文件最大支持30M</p>
                   <p>2.支持文件格式：.pdf、.png、.jpg</p>
                   <p>3.选择本地文件上传即可</p>
               </div>
           </div>
       </div>
</template>

<script>
    import {addGallery, getCategoryTree, uploadFile} from "../../api/api";

    function getBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    }
    let popup=document.getElementsByClassName("popup")
    export default {
        name: 'GalleryPopup',
        inject:['reload'],
        data() {
            return {
                //shu
                value: undefined,
                //shangchaun
                previewVisible: false,
                previewImage: '',
                fileList: [],
                list:[],
                newList:[],
                text:"",
                show:true,
                num:0,
                type:'',
                valueV:[],
                filetype:'',
                fileType:[]
            }
        },
        created() {
            getCategoryTree().then(res=>{
                console.log(res)
                this.list = res.list
            })
        },
        watch: {
            checkedKeys(val) {
                console.log('onCheck', val);
            },
        },
        methods: {
            Hide(){
                popup[0].style.display="none"
            },
            handleCancel() {
                this.previewVisible = false;
            },
            handleRemove(file){
                const index = this.fileList.indexOf(file)
                const newFileList = this.fileList.slice()
                newFileList.splice(index,1)
                this.fileList = newFileList
                console.log(index)
            },
            async handlePreview(file) {
                if (!file.url && !file.preview) {
                    file.preview = await getBase64(file.originFileObj);
                }
                this.previewImage = file.url || file.preview;
                this.previewVisible = true;
            },
            handleChange({ fileList }) {
                this.fileList = fileList;
            },
            upload(){
                console.log(this.newList)
                const list = []


                for (let i = 0 ;i<this.newList.length;i++){
                    this.filetype=this.newList[i].fileName.split(".").pop()
                    if(this.filetype === "pdf"||this.filetype === "PDF"){
                        this.type = '5'
                    }
                    else if(this.filetype ==="png"||this.filetype === "PNG"){
                        this.type = '6'
                    }
                    else if(this.filetype ==="jpg"||this.filetype === "JPG"){
                        this.type = '7'
                    }
                    list.push({
                        'fileName':this.newList[i].fileName,
                        'fileType':this.type,
                        'filesize':this.newList[i].fileSize,
                        'size':this.newList[i].size,
                        'thumbnail':this.newList[i].thumbnail,
                        'url':this.newList[i].url
                    })
                    // 检测数组中是否存在此类型
                    if(this.fileType.indexOf(Number(this.type))===-1){
                        this.fileType.push(Number(this.type))
                    }

                }
               let  file = this.fileType.join(',')
                // console.log(this.fileType)
                for (let i = 0 ;i<this.value.length;i++){
                    this.valueV.push(Number(this.value[i]))
                }
                addGallery(this.valueV.join(","),this.text,file,list,"lalala").then(res=>{
                    console.log(res)
                    this.show = false
                    this.$message.success('文件上传成功');
                    this.reload()
                })

            },
            beforeUpload(file) {
                this.fileList = [...this.fileList, file];
                // console.log("文件上传失败")
                const isLt30 = file.size / 1024 / 1024 < 30
                if (!isLt30) {
                    this.$message.error('图片不得大于30MB!')
                }
                else{

                    console.log(this.fileList[0])

                    uploadFile(3,this.fileList[this.num]).then(res=>{
                        console.log(this.filetype)
                        console.log(res)
                        this.newList.push(res.list[0])
                        this.num++
                        console.log(this.newList)

                    }).catch(err=>{
                        console.log(err)
                    })
                }
                return false && isLt30;
            },
        //    tree
            onChange(value) {
                console.log(value);
                this.value = value;
            },
            onSearch() {
                console.log(...arguments);
            },
            onSelect() {
                console.log(...arguments);
            },
        },
        components: {

        }
    }
</script>
<style scoped lang="less">
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }

    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
  .pop-up {
      width: 950px;
      height: 660px;
      background-color: rgba(255, 255, 255, 1);
  }

    .lala{
        width: 870px;
        height: 69px;
        margin: 0 auto;
        p {
            font-size: 16px;
            font-family: PingFangSC-Regular;
            color: #000000;
            opacity: 1;
            float: left;
            margin-top: 24px;
            cursor: default;
        }
        img {
            width: 20px;
            height: 20px;
            float: right;
            margin-top: 24px;
            cursor: pointer;
        }
    }

  .popup {
      position: absolute;
      top: 0;
      left: 0;
      width: 1440px;
      height: 875px;
      background: rgba(0, 0, 0, 0.32);
      box-sizing: border-box;
      padding: 150px 150px 150px 304px;
      display: none;
  }
    /*上传的样式*/
    .shangchuan {
        width: 870px;
        height: 400px;
        border: 1px dashed rgba(151, 151, 151, 1);
        margin: 0 auto;
    }
/*    提示*/
    .tishi {
        width: 870px;
        margin: 0 auto;
        cursor: default;
        p{
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular;
            line-height: 22px;
            color: #000000;
            opacity: 1;
            margin-top: 12px;
        }
    }
    .clearfix {
        padding: 20px;
    }
    .tree {
        p {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.25);
        }
        width: 290px;
        display: flex;
        margin: 0 auto;
       /deep/.ant-select {
           width: 214px !important;
           height: 32px;
           margin-left: 20px;
       }

    }
    .up {
        width: 121px;
        margin: 16px auto;
        height: 40px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        color: #FFFFFF;
        background: #0091FF;
        border: 1px solid #2A7EFB;
        opacity: 1;
        border-radius: 4px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    /deep/.ant-upload-list-picture-card-container{
        float: none;
    }
    /deep/.ant-upload-list{
        display: flex;
    }
    /deep/.ant-upload-picture-card-wrapper {
        display: flex!important;
        justify-content: center;
    }
    .name {
        display: flex;
        width: 290px;
        margin: 0 auto;
        justify-content: left;
        margin-bottom: 10px;
        p {
            font-size: 14px;
            font-family: PingFangSC-Regular;
            line-height: 22px;
            color: rgba(0, 0, 0, 0.25);
        }
        input {
            width: 214px;
            height: 32px;
            background: #FFFFFF;
            border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
            opacity: 1;
            border-radius: 4px;
            margin-left:20px;
        }
    }
</style>
